<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组织管理 - 酒店系统权限管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-6">
        <!-- 页面标题和操作按钮 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">组织管理</h1>
            <div>
                <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded flex items-center mr-2" onclick="openModal('importOrgModal')">
                    <i class="fas fa-file-import mr-2"></i> 导入组织
                </button>
                <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded flex items-center" onclick="openModal('addOrgModal')">
                    <i class="fas fa-plus mr-2"></i> 添加组织
                </button>
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 左侧：组织树 -->
            <div class="col-span-1 bg-white rounded-lg shadow-md p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-semibold text-gray-800">组织结构</h2>
                    <div>
                        <button class="text-gray-500 hover:text-gray-700 mr-2" title="展开全部">
                            <i class="fas fa-expand-alt"></i>
                        </button>
                        <button class="text-gray-500 hover:text-gray-700" title="收起全部">
                            <i class="fas fa-compress-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="relative">
                    <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 pl-10 mb-4" placeholder="搜索组织...">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" style="height: 38px;">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                </div>
                <div class="org-tree overflow-y-auto" style="max-height: calc(100vh - 250px);">
                    <ul class="space-y-2">
                        <li>
                            <div class="flex items-center py-2">
                                <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                                <span class="text-gray-800 font-medium cursor-pointer hover:text-indigo-600 org-item active">酒店集团总部</span>
                            </div>
                            <ul class="ml-6 space-y-2">
                                <li>
                                    <div class="flex items-center py-2">
                                        <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn">
                                            <i class="fas fa-chevron-down"></i>
                                        </button>
                                        <span class="text-gray-800 font-medium cursor-pointer hover:text-indigo-600 org-item">行政管理中心</span>
                                    </div>
                                    <ul class="ml-6 space-y-2">
                                        <li>
                                            <div class="flex items-center py-2">
                                                <span class="w-4 mr-2"></span>
                                                <span class="text-gray-800 cursor-pointer hover:text-indigo-600 org-item">人力资源部</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="flex items-center py-2">
                                                <span class="w-4 mr-2"></span>
                                                <span class="text-gray-800 cursor-pointer hover:text-indigo-600 org-item">行政部</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="flex items-center py-2">
                                                <span class="w-4 mr-2"></span>
                                                <span class="text-gray-800 cursor-pointer hover:text-indigo-600 org-item">法务部</span>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <div class="flex items-center py-2">
                                        <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn">
                                            <i class="fas fa-chevron-down"></i>
                                        </button>
                                        <span class="text-gray-800 font-medium cursor-pointer hover:text-indigo-600 org-item">财务中心</span>
                                    </div>
                                    <ul class="ml-6 space-y-2">
                                        <li>
                                            <div class="flex items-center py-2">
                                                <span class="w-4 mr-2"></span>
                                                <span class="text-gray-800 cursor-pointer hover:text-indigo-600 org-item">财务部</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="flex items-center py-2">
                                                <span class="w-4 mr-2"></span>
                                                <span class="text-gray-800 cursor-pointer hover:text-indigo-600 org-item">审计部</span>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <div class="flex items-center py-2">
                                        <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn">
                                            <i class="fas fa-chevron-down"></i>
                                        </button>
                                        <span class="text-gray-800 font-medium cursor-pointer hover:text-indigo-600 org-item">北京分公司</span>
                                    </div>
                                    <ul class="ml-6 space-y-2">
                                        <li>
                                            <div class="flex items-center py-2">
                                                <span class="w-4 mr-2"></span>
                                                <span class="text-gray-800 cursor-pointer hover:text-indigo-600 org-item">前台部</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="flex items-center py-2">
                                                <span class="w-4 mr-2"></span>
                                                <span class="text-gray-800 cursor-pointer hover:text-indigo-600 org-item">客房部</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="flex items-center py-2">
                                                <span class="w-4 mr-2"></span>
                                                <span class="text-gray-800 cursor-pointer hover:text-indigo-600 org-item">餐饮部</span>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <div class="flex items-center py-2">
                                        <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn">
                                            <i class="fas fa-chevron-right"></i>
                                        </button>
                                        <span class="text-gray-800 font-medium cursor-pointer hover:text-indigo-600 org-item">上海分公司</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="flex items-center py-2">
                                        <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn">
                                            <i class="fas fa-chevron-right"></i>
                                        </button>
                                        <span class="text-gray-800 font-medium cursor-pointer hover:text-indigo-600 org-item">广州分公司</span>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 右侧：组织详情 -->
            <div class="col-span-1 md:col-span-2 bg-white rounded-lg shadow-md p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-lg font-semibold text-gray-800">组织详情</h2>
                    <div>
                        <button class="text-indigo-600 hover:text-indigo-900 font-medium mr-4" onclick="openModal('editOrgModal')">
                            <i class="fas fa-edit mr-1"></i> 编辑
                        </button>
                        <button class="text-red-600 hover:text-red-900 font-medium" onclick="openModal('deleteOrgModal')">
                            <i class="fas fa-trash-alt mr-1"></i> 删除
                        </button>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 基本信息 -->
                    <div class="col-span-2 bg-gray-50 rounded-lg p-4">
                        <h3 class="text-md font-medium text-gray-700 mb-4">基本信息</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <p class="text-sm text-gray-500">组织名称</p>
                                <p class="text-gray-800 font-medium">酒店集团总部</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">组织编码</p>
                                <p class="text-gray-800 font-medium">ORG-001</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">组织类型</p>
                                <p class="text-gray-800 font-medium">总部</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">上级组织</p>
                                <p class="text-gray-800 font-medium">无</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">创建时间</p>
                                <p class="text-gray-800 font-medium">2023-01-01 08:00:00</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">状态</p>
                                <p class="text-green-600 font-medium">启用</p>
                            </div>
                            <div class="col-span-2">
                                <p class="text-sm text-gray-500">描述</p>
                                <p class="text-gray-800">酒店集团总部，负责整个酒店集团的管理和运营。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 下级组织 -->
                    <div class="col-span-2">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-md font-medium text-gray-700">下级组织</h3>
                            <button class="text-indigo-600 hover:text-indigo-900 text-sm" onclick="openModal('addSubOrgModal')">
                                <i class="fas fa-plus mr-1"></i> 添加下级组织
                            </button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            组织名称
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            组织编码
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            组织类型
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            负责人
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            状态
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            操作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">行政管理中心</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">ORG-002</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">中心</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">张总</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                启用
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-indigo-600 hover:text-indigo-900 mr-2">查看</button>
                                            <button class="text-red-600 hover:text-red-900">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">财务中心</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">ORG-003</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">中心</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">李总</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                启用
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-indigo-600 hover:text-indigo-900 mr-2">查看</button>
                                            <button class="text-red-600 hover:text-red-900">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">北京分公司</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">ORG-004</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">分公司</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">王经理</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                启用
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-indigo-600 hover:text-indigo-900 mr-2">查看</button>
                                            <button class="text-red-600 hover:text-red-900">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">上海分公司</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">ORG-005</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">分公司</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">赵经理</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                启用
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-indigo-600 hover:text-indigo-900 mr-2">查看</button>
                                            <button class="text-red-600 hover:text-red-900">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">广州分公司</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">ORG-006</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">分公司</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">钱经理</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                禁用
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-indigo-600 hover:text-indigo-900 mr-2">查看</button>
                                            <button class="text-red-600 hover:text-red-900">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- 组织成员 -->
                    <div class="col-span-2">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-md font-medium text-gray-700">组织成员</h3>
                            <button class="text-indigo-600 hover:text-indigo-900 text-sm" onclick="openModal('assignMembersModal')">
                                <i class="fas fa-user-plus mr-1"></i> 分配成员
                            </button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            姓名
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            工号
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            职位
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            手机号
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            邮箱
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            操作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">张明</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">EMP001</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">总经理</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">13800138001</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">zhangming@example.com</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-red-600 hover:text-red-900">移除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">李华</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">EMP002</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">副总经理</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">13800138002</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">lihua@example.com</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-red-600 hover:text-red-900">移除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">王芳</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">EMP003</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">行政总监</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">13800138003</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-500">wangfang@example.com</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-red-600 hover:text-red-900">移除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加组织模态框 -->
    <div id="addOrgModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加组织</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('addOrgModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">组织名称</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入组织名称">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">组织编码</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入组织编码">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">组织类型</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="">请选择组织类型</option>
                                <option value="headquarters">总部</option>
                                <option value="center">中心</option>
                                <option value="branch">分公司</option>
                                <option value="department">部门</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">上级组织</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="">请选择上级组织</option>
                                <option value="1">酒店集团总部</option>
                                <option value="2">行政管理中心</option>
                                <option value="3">财务中心</option>
                                <option value="4">北京分公司</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="">请选择负责人</option>
                                <option value="1">张明</option>
                                <option value="2">李华</option>
                                <option value="3">王芳</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <div class="flex items-center space-x-4">
                                <div class="flex items-center">
                                    <input type="radio" id="status-active" name="status" value="active" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
                                    <label for="status-active" class="ml-2 block text-sm text-gray-700">启用</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="radio" id="status-inactive" name="status" value="inactive" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    <label for="status-inactive" class="ml-2 block text-sm text-gray-700">禁用</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
                            <textarea rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入组织描述"></textarea>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('addOrgModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑组织模态框 -->
    <div id="editOrgModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">编辑组织</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('editOrgModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">组织名称</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="酒店集团总部">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">组织编码</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="ORG-001">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">组织类型</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="">请选择组织类型</option>
                                <option value="headquarters" selected>总部</option>
                                <option value="center">中心</option>
                                <option value="branch">分公司</option>
                                <option value="department">部门</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">上级组织</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="" selected>无</option>
                                <option value="1">酒店集团总部</option>
                                <option value="2">行政管理中心</option>
                                <option value="3">财务中心</option>
                                <option value="4">北京分公司</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="">请选择负责人</option>
                                <option value="1" selected>张明</option>
                                <option value="2">李华</option>
                                <option value="3">王芳</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <div class="flex items-center space-x-4">
                                <div class="flex items-center">
                                    <input type="radio" id="edit-status-active" name="edit-status" value="active" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
                                    <label for="edit-status-active" class="ml-2 block text-sm text-gray-700">启用</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="radio" id="edit-status-inactive" name="edit-status" value="inactive" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    <label for="edit-status-inactive" class="ml-2 block text-sm text-gray-700">禁用</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
                            <textarea rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">酒店集团总部，负责整个酒店集团的管理和运营。</textarea>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('editOrgModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 添加下级组织模态框 -->
    <div id="addSubOrgModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加下级组织</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('addSubOrgModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">组织名称</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入组织名称">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">组织编码</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入组织编码">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">组织类型</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="">请选择组织类型</option>
                                <option value="center">中心</option>
                                <option value="branch">分公司</option>
                                <option value="department">部门</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">上级组织</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="酒店集团总部" disabled>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="">请选择负责人</option>
                                <option value="1">张明</option>
                                <option value="2">李华</option>
                                <option value="3">王芳</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <div class="flex items-center space-x-4">
                                <div class="flex items-center">
                                    <input type="radio" id="sub-status-active" name="sub-status" value="active" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
                                    <label for="sub-status-active" class="ml-2 block text-sm text-gray-700">启用</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="radio" id="sub-status-inactive" name="sub-status" value="inactive" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    <label for="sub-status-inactive" class="ml-2 block text-sm text-gray-700">禁用</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
                            <textarea rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入组织描述"></textarea>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('addSubOrgModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 分配成员模态框 -->
    <div id="assignMembersModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">分配成员</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('assignMembersModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">搜索成员</label>
                    <div class="flex">
                        <input type="text" class="flex-1 rounded-l-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="输入姓名或工号搜索">
                        <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-r-md">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="overflow-x-auto max-h-96">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50 sticky top-0">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    姓名
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    工号
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    职位
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    所属组织
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">赵强</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">EMP004</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">市场总监</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">行政管理中心</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">孙丽</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">EMP005</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">财务经理</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">财务中心</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">周明</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">EMP006</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">人事主管</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">行政管理中心</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">吴刚</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">EMP007</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">IT经理</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">行政管理中心</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">郑红</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">EMP008</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">前台经理</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">北京分公司</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="flex justify-end mt-6">
                    <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('assignMembersModal')">
                        取消
                    </button>
                    <button type="button" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                        确认分配
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除组织确认模态框 -->
    <div id="deleteOrgModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/5 lg:w-1/3 shadow-lg rounded-md bg-white">
            <div class="mt-3 text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                    <i class="fas fa-exclamation-triangle text-red-600"></i>
                </div>
                <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">确认删除</h3>
                <div class="mt-2 px-7 py-3">
                    <p class="text-sm text-gray-500">
                        您确定要删除该组织吗？此操作将同时删除该组织下的所有下级组织，且不可恢复。
                    </p>
                </div>
                <div class="flex justify-center mt-4 px-4 py-3">
                    <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('deleteOrgModal')">
                        取消
                    </button>
                    <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                        确认删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 打开模态框
        function openModal(modalId) {
            document.getElementById(modalId).classList.remove('hidden');
        }
        
        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
        }
        
        // 组织树展开/折叠
        document.addEventListener('DOMContentLoaded', function() {
            const toggleButtons = document.querySelectorAll('.toggle-btn');
            
            toggleButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const parentLi = this.closest('li');
                    const subList = parentLi.querySelector('ul');
                    
                    if (subList) {
                        if (icon.classList.contains('fa-chevron-down')) {
                            icon.classList.remove('fa-chevron-down');
                            icon.classList.add('fa-chevron-right');
                            subList.style.display = 'none';
                        } else {
                            icon.classList.remove('fa-chevron-right');
                            icon.classList.add('fa-chevron-down');
                            subList.style.display = 'block';
                        }
                    }
                });
            });
            
            // 组织项点击事件
            const orgItems = document.querySelectorAll('.org-item');
            
            orgItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有选中状态
                    orgItems.forEach(i => i.classList.remove('text-indigo-600', 'font-semibold'));
                    
                    // 添加选中状态
                    this.classList.add('text-indigo-600', 'font-semibold');
                    
                    // 这里可以添加加载对应组织详情的逻辑
                    // loadOrgDetails(this.dataset.orgId);
                });
            });
        });
    </script>
</body>
</html>